import { WeElement, define } from 'omi'

import './index.css'

define("select_picture", class extends WeElement{
  
  data={
   modell:[
     
       {text: "什么规格0"},
       {text: "什么规格1"},
     { text: "什么规格2" },
     { text: "什么规格3" },
     { text: "什么规格4" },
     { text: "什么规格5" },
     { text: "什么规格6" },
     { text: "什么规格7" },
     { text: "什么规格8" },
     { text: "什么规格9" },
     { text: "什么规格" },
    
   ]
  }

  install(){
    this.data.count = 1;
    this.data.number=0;
    this.data.bg_none = 1;
  }
  add=()=>{
    this.data.count++
    this.update()
  }
  sub=()=>{
    this.data.count--
    if (this.data.count<1){
      this.data.count=1
    }
    this.update()
  }
  bg_none=()=>{
    this.fire('choosebgnone', {
      date: this.data.modell[this.data.number].text,
      sum:this.data.count,
    })
    this.update()
  }
  // 选择规格加类名
  model=(e)=>{
    console.log(e)
    this.data.number = e.currentTarget.dataset.i
    console.log(this.data.modell[this.data.number].text)
    this.update()
  }
      render(){
        const { modell}=this.data
    return(
      <view>
        <view class="three_but" onClick={this.bg_none}></view>
          <view class="bottom_box">
          <view class="text_box">
              <text>规格</text>
              <view class="inp_box">
                {
                  modell.map((itme, index) => (
                    <input type="radio"  value={itme.text} class={['inp',index==this.data.number&&'active']} data-i={index} onClick={this.model} disabled />
                  )
                  )
                }
              </view>
              <view class="math">
                <text>数量</text>
                <view class="add_sub">
                <text onClick={this.sub} class="sub">-</text>
                  <text class="num_text">{count}</text>
                <text onClick={this.add} class="add">+</text>
                </view>
              </view>
             
          </view>
          
          </view>
        
        <view class={['submit', this.data.number != -1 &&'actived']}>完成</view>
      </view>
     )
     }
})